<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>腐蚀速率</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 腐蚀速率卡片视图区域 -->
    <el-card>
      <el-row :gutter="10">
        <el-col :span="5">
          <el-select v-model="cPeriod" placeholder="快速选择时间" size="small" @change="cTimeChange">
            <el-option v-for="item in cPeriods" :key="item.index" :label="item.label" :value="item.days"> </el-option>
          </el-select>
        </el-col>

        <el-col :span="8">
          <el-date-picker
            v-model="dateRange"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="dateRangeChange"
            size="small"
          >
          </el-date-picker>
        </el-col>

        <el-col :span="6">
          <el-input placeholder="请输入检索设备的关键词" v-model="queryInfo.deviceQuery" clearable size="small"></el-input>
        </el-col>

        <el-col :span="3">
          <el-button type="primary" @click="getCorrosionData" size="small">搜索</el-button>
        </el-col>
      </el-row>

      <el-table :data="devices">
        <el-table-column type="index" label="序号" width="80"> </el-table-column>
        <el-table-column prop="gateway" label="网关" width="150"> </el-table-column>
        <el-table-column prop="devicename" label="设备号" width="150"> </el-table-column>
        <el-table-column prop="probe" label="探头" width="150"> </el-table-column>
        <el-table-column prop="thick_change" label="壁厚变化量(mm)" width="150"> </el-table-column>
        <el-table-column label="腐蚀速率曲线" width="150">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-data-line" size="mini" @click="showCorrosionCharts(scope.row.id)">腐蚀曲线</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页组件区域 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum"
        :page-sizes="[20, 50, 100, 200]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>

    <!-- 腐蚀曲线卡片视图区域 -->
    <el-card>
      <div style="width: 100; height: 500px" ref="corrosionChartRef"></div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 腐蚀的时间间隔
      cPeriod: 30,
      cPeriods: [
        { index: 0, label: '自定义', days: 0 },
        { index: 1, label: '近一天', days: 1 },
        { index: 2, label: '近一周', days: 7 },
        { index: 3, label: '近一月', days: 30 },
        { index: 4, label: '近三月', days: 90 },
        { index: 5, label: '近一年', days: 365 },
      ],
      nowTime: new Date().getTime(),
      queryInfo: {
        deviceQuery: '',
        pagenum: 1,
        pagesize: 20,
        offdays: 30,
      },
      dateRange: [new Date(new Date().getTime() - 30 * 24 * 60 * 60 * 1000), new Date()],
      total: 10,
      devices: [],
      corrosionChart: null,
      mDates: [],
      thickChanges: [],
    }
  },
  created() {
    this.getCorrosionData()
  },
  mounted() {
    this.initCorrosionCharts()
  },
  methods: {
    // 选择的时间段发生变化时的处理函数
    cTimeChange() {
      if (this.cPeriod > 0) {
        this.dateRange = [new Date(this.nowTime - this.cPeriod * 24 * 60 * 60 * 1000), new Date()]
      }
    },
    // 获取搜索设备的腐蚀速度
    async getCorrosionData() {
      this.queryInfo.startDate = Math.round(this.dateRange[0].getTime() / 1000)
      this.queryInfo.endDate = Math.round(this.dateRange[1].getTime() / 1000)
      const { data: res } = await this.$http.get('thickcharts/corrosiondata/', { params: this.queryInfo })
      if (res.meta.status === 200) {
        this.devices = res.data.devices
        this.total = res.data.total
        this.$message.success('查询腐蚀数据成功！')
      } else if (res.meta.status === 201) {
        this.$message.error(res.meta.message)
      } else {
        this.$message.error('查询腐蚀数据失败！')
      }
    },
    // 自定义的时间范围改变时处理函数
    dateRangeChange() {
      this.cPeriod = 0
    },
    // 每页显示个数发生变化时的处理函数
    handleSizeChange(newSize) {
      this.queryInfo.pagesize = newSize
      this.getCorrosionData()
    },
    // 选定页码发生变化时的处理函数
    handleCurrentChange(currentPage) {
      console.log(currentPage)
      this.queryInfo.pagenum = currentPage
      this.getCorrosionData()
    },
    // 初始化腐蚀曲线实例
    initCorrosionCharts() {
      this.corrosionChart = this.$echarts.init(this.$refs.corrosionChartRef)
      var initOption = {
        title: {
          text: '腐蚀量变化曲线',
          textStyle: {
            fontSize: 25,
          },
          // 坐标轴的配置
          grid: {
            show: true,
            top: '150%',
            left: '3%',
            right: '6%',
            bottom: '3%',
            containLabel: true,
          },
          left: 150,
          top: 15,
        },
        // 信息提示相关的配置
        tooltip: {},
        // 范围缩放器
        dataZoom: [
          {
            type: 'slider',
            xAxisIndex: 0,
          },
        ],
        toolbox: {
          feature: {
            saveAsImage: {},
            dataZoom: {},
            dataView: {
              show: true,
              title: '数据视图',
              readOnly: true,
            },
          },
        },
        xAxis: {
          type: 'category',
          // 坐标紧挨边缘
          boundaryGap: false,
        },
        yAxis: {
          type: 'value',
          // 配置y轴数据是否从0开始
          scale: false,
          position: 'left',
        },
        series: [
          {
            name: '腐蚀量变化曲线',
            type: 'line',
            smooth: true,
            data: [0, 0, 0, 0, 0],
            lineStyle: {
              // color: 'blue',
              type: 'solid',
            },
            markPoint: {
              data: [
                {
                  type: 'max',
                },
                {
                  type: 'min',
                },
              ],
            },
            markLine: {
              data: [{ type: 'average' }],
            },
          },
        ],
      }
      // 使用刚指定的配置项和数据显示图表。
      this.corrosionChart.setOption(initOption)
    },
    // 显示腐蚀速率图表
    async showCorrosionCharts(deviceId) {
      this.corrosionChart.showLoading()
      this.queryInfo.deviceId = deviceId
      this.queryInfo.offdays = Math.round((this.dateRange[1].getTime() - this.dateRange[0].getTime()) / (1000 * 24 * 3600))
      // console.log(this.queryInfo.offdays)
      const { data: res } = await this.$http.get('thickcharts/corrosionchart/', { params: this.queryInfo })
      if (res.meta.status === 200) {
        // console.log(res)
        this.mDates = res.data.m_dates
        this.thickChanges = res.data.thick_changes
        this.queryInfo.offdays = res.data.offdays
        this.updateCorrosionCharts()
        this.$message.success('获取腐蚀曲线成功')
        this.corrosionChart.hideLoading()
      }
    },
    // 更新腐蚀速度曲线图数据
    updateCorrosionCharts() {
      const dataOption = {
        title: {
          text: '每' + this.queryInfo.offdays + '天腐蚀量变化曲线',
        },
        xAxis: {
          data: this.mDates,
        },
        series: {
          data: this.thickChanges,
        },
      }
      this.corrosionChart.setOption(dataOption)
    },
  },
  // computed: {
  //   dateRange: {
  //     get() {
  //       return [new Date(this.nowTime - this.cPeriod * 24 * 60 * 60 * 1000), new Date()]
  //     },
  //     set(v) {
  //       console.log(v)
  //       this.queryInfo.offdays = Math.round((v[1].getTime() - v[0].getTime()) / (1000 * 24 * 3600))
  //       this.queryInfo.startDate = Math.round(v[0].getTime() / 1000)
  //       this.queryInfo.endDate = Math.round(v[1].getTime() / 1000)
  //     },
  //   },
  // },
}
</script>

<style lang='less' scoped>
</style>